<template>
  <div>
    <el-card class="box-card" style="margin-bottom:20px;">
      <div slot="header">
        <h4>目标任务总量及进度亮灯情况</h4>
      </div>
      <div>
        <div class="selectData">
          <span style="font-size:14px;margin-right: 6px;">季度:</span>
          <el-select
            class="userIntSize"
            v-model="quarter"
            size="small"
            clearable
            placeholder="请选择季度"
            @change="getUpdate()"
          >
            <el-option
              v-for="item in quarterList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
          <span style="margin-left:20px;margin-right:6px;font-size:14px;"
            >重点工作:</span
          >
          <el-cascader
            ref="taskRef"
            class="userIntSize"
            v-model="taskId"
            :options="taskLists"
            :props="taskProp"
            size="small"
            :show-all-levels="false"
            @change="getTaskId"
          ></el-cascader>
        </div>
        <div class="selectData">
          <ul class="focus">
            <li class="coor1">
              <span>
                <i>目标任务数量</i>
                <b>{{ taskSum }}</b>
              </span>
              <p></p>
            </li>
            <li class="both coor2">
              <span>
                <i>
                  黄灯
                  <em>{{ yellowNum }}个</em>
                </i>
                <i style="margin-top:6px;">
                  占比
                  <em>{{ yellowRate }}%</em>
                </i>
              </span>
              <p></p>
            </li>
            <li class="both coor3">
              <span>
                <i>
                  绿灯
                  <em>{{ greenNum }}个</em>
                </i>
                <i style="margin-top:6px;">
                  占比
                  <em>{{ greenRate }}%</em>
                </i>
              </span>
              <p></p>
            </li>
            <li class="both coor4">
              <span>
                <i>
                  红灯
                  <em>{{ redNum }}个</em>
                </i>
                <i style="margin-top:6px;">
                  占比
                  <em>{{ redRate }}%</em>
                </i>
              </span>
              <p></p>
            </li>
          </ul>
        </div>
      </div>
    </el-card>
    <div>
      <echartsSevens></echartsSevens>
    </div>
    <div class="focusParent">
      <echartsSevenTow></echartsSevenTow>
    </div>
  </div>
</template>
<script>
import echartsSevens from "./conponents/echartsSevens";
import echartsSevenTow from "./conponents/echartsSevenTow";
export default {
  data() {
    return {
      quarter: 1,
      taskSum: 0,
      redRate: 0,
      redNum: 0,
      greenRate: 0,
      greenNum: 0,
      yellowRate: 0,
      yellowNum: 0,
      quarterList: [
        { id: 1, name: "第一季度" },
        { id: 2, name: "第二季度" },
        { id: 3, name: "第三季度" },
        { id: 4, name: "第四季度" }
      ],
      tableData: [],
      tableDataboy: [],
      //   -------
      taskId: [],
      taskIds: "",
      tasksList: [],
      isActive: 0,
      quarter01: "",
      taskProp: {
        label: "name",
        value: "id",
        children: "children"
      },
      taskLists: [],
      taskTableData: []
    };
  },
  components: {
    echartsSevens: echartsSevens,
    echartsSevenTow: echartsSevenTow
  },
  mounted() {
    this.getTaskList();
    // this.getTaskListByPage(this.taskId);
  },
  methods: {
    getUpdate() {
      this.getNumber();
    },
    // 获取数据
    getNumber() {
      let _val = JSON.parse(JSON.stringify(this.taskId));
      if (!Array.isArray(_val)) {
        _val = [_val];
      }
      _val = _val[_val.length - 1];
      console.log(_val, 888);
      this.$axios
        .post(`/distribution/getTaskTargetLightUpRate`, {
          taskId: _val,
          quarter: this.quarter
        })
        .then(res => {
          console.log(res);
          if (res.code == 200) {
            let _data = res.data;
            if (_data.length != 0) {
              this.taskSum = _data[0].taskSum;
              this.redRate = _data[0].redRate * 100;
              this.rednNum = _data[0].rednNum;
              this.yellowRate = _data[0].yellowRate * 100;
              this.yellowNum = _data[0].yellowNum;
              this.greenRate = _data[0].greenRate * 100;
              this.greenNum = _data[0].greenNum;
            } else {
              this.taskSum = 0;
              this.redRate = 0;
              this.redNum = 0;
              this.yellowRate = 0;
              this.yellowNum = 0;
              this.greenRate = 0;
              this.greenNum = 0;
            }
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 时刻获取十项重点工作
    getTaskId(val) {
      if (val) {
        this.getNumber();
      }
    },
    // 获取十项重点工作
    getTaskList() {
      this.$axios
        .post("/task/getList")
        .then(res => {
          if (res.code == 200) {
            let arr = res.data;
            if (arr[0].children.length == 0) {
              this.taskId = arr[0].id;
            } else {
              this.taskId = arr[0].children[0].id;
            }
            arr.forEach(item => {
              if (item.children.length == 0) {
                item.children = undefined;
              }
            });

            console.log(this.taskId, 9999);
            // this.taskId = arr[0].children[0].id;
            console.log(arr);
            arr.splice(0, 0, { id: 1, name: "全部" });
            this.taskLists = arr;
            console.log(this.taskLists);
            this.getNumber();
          }
        })
        .catch(err => {});
    }
  }
};
</script>
<style lang="less" scope>
.userIntSizes {
  width: 20% !important;
}
#YmyChart,
#YmyChartTow {
  width: 80%;
  height: 440px;
  margin-top: 50px;
}
.all {
  width: 100%;
  min-width: 1200px;
  height: 700px;
}
.left {
  float: left;
  width: 17%;
  min-width: 200px;
  padding-left: 2%;
  height: 100%;
}
.right {
  float: right;
  width: 83%;
  min-width: 500px;
  height: 100%;
  background: #fff;
}
.nav {
  margin-left: 20px;
}
.btn_bottom {
  width: 160px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-radius: 4px;
  background: #66b1ff;
  font-size: 12px;
  margin-bottom: 10px;
  color: #fff;
  cursor: pointer;
}
.active {
  background: #67c23a;
}
.focusParent {
  width: 100%;
}
.search {
  width: 600px;
  height: 40px;
  margin: 0 auto;
}
.selectData {
  display: flex;
  justify-content: center;
  align-items: center;
}
.focus {
  // width: 100%;
  margin: 0 auto;
  margin-top: 40px;
  margin-bottom: 10px;
  > li {
    float: left;
    margin-left: 20px;
    width: 240px;
    height: 100px;
    border-radius: 4px;
    > span {
      float: left;
      width: 160px;
      height: 100%;
      > i {
        display: inline-block;
        font-size: 12px;
        color: #fff;
        font-style: normal;
        margin-top: 26px;
        margin-left: 30px;
      }
      > b {
        display: block;
        font-size: 16px;
        color: #fff;
        margin-top: 10px;
        margin-left: 30px;
      }
    }
    > p {
      float: right;
      width: 50px;
      height: 50px;
      background: url("../../assets/img/1p.png") no-repeat;
      background-size: 100% 100%;
      margin-right: 30px;
      margin-top: 20px;
    }
  }
  .coor2 > p,
  .coor3 > p,
  .coor4 > p {
    background: url("../../assets/img/2p.png") no-repeat;
    background-size: 100% 100%;
  }
  .both {
    > span {
      > i {
        display: inline-block;
        font-size: 12px;
        color: #fff;
        font-style: normal;
        > em {
          display: inline-block;
          font-style: normal;
          font-size: 16px;
          font-weight: 600;
          margin-left: 4px;
        }
      }
    }
  }
}
.coor1 {
  background: #11cdef;
}
.coor2 {
  background: #ffd64a;
}
.coor3 {
  background: #2cce89;
}
.coor4 {
  background: #f5365b;
}
</style>
